let vm = new Vue({
    el: '.main-content',
    data: function(){
        return {
            pageInfo: {
                pageNum: 1,
                pageSize: 5
            },//接受后台页对象
            params:{
                type:''//设置默认值  用于默认显示选项<option value="">请选择考核类型</option>
            },
            flag:false,
            settings:{
                data:{//数据属性设置
                    //ztree可以通过传入一维数组来实现自动组装成树形结构（自动转多维数组遍历）
                    simpleData: {
                        enable:true,  //设置简单数据格式，可以使用一维数组的节点数据
                        pIdKey:'parentId'  //指定父节点id关联属性名
                    }
                },
                callback:{
                    //绑定onclick回调事件函数
                    //当data进行绑定this.onClick函数对象的时候   this的onClick函数还没有初始化  必须将data设置为function回调
                    onClick:this.onClick
                },
                view:{
                    //每次显示节点都会调用该属性对样式赋值，返回json格式
                    fontCss:  this.fontCss
                }
            },
            nodes:[],
            nodeName:'',
            officeName:'全部'
        }
    },
    methods: {
        selectPage: function (pageNum, pageSize) {
            //分页查询返回信息放入pageInfo
            axios({
                url:`manager/examine/selectPage/${pageNum}/${pageSize}`,
                method:'post',
                data:this.params    //放入请求体，且以json格式传递到后台
            }).then(response=>{
                this.pageInfo=response.data.obj;
            }).catch(error=>{
                layer.msg(error.message);
            })
        },
        changeShow:function () {
            this.flag=!this.flag;
        },
        initTree:function () {
            //初始化nodes
            axios({
                url:'manager/office/list'
            }).then(response=>{
                this.nodes = response.data.obj;

                this.nodes[this.nodes.length]={id:0,name:'全部机构',open:true};//动态在nodes最后添加一个父节点数据
                //initTree(obj,setting,nodes)
                //obj:挂载ztree的dom结点  jq选择器选择元素
                //setting:ztree的设置
                //nodes:节点对象数组
                let treeObj = $.fn.zTree.init($("#pullDownTreeone"),this.settings,this.nodes);
                // console.log(treeObj);
            }).catch(error=>{
                layer.msg(error.message);
            })

        },
        onClick:function (event,treeId,treeNode) {//event:事件对象  treeId树对象的id ：pullDownTreeSearchone treeNode被点击节点
            // console.log(treeNode.name);
            //点击节点后，将节点名字显示到下拉组件上
            this.officeName=treeNode.name;
            //给params赋值
            if(treeNode.id!=0){
                this.params.officeId=treeNode.id;
            }else{
                this.params.officeId='';//查全部office
            }
        },
        findNames:function () {
            //1.根据查询数据，从所有节点名中模糊匹配节点
            let zTreeObj = $.fn.zTree.getZTreeObj("pullDownTreeone");//根据树的id查找树对象
//getNodesByParamFuzzy(key,value,parentNode)  key:属性名   value：属性值  parentNode父节点
            let nodesByParamFuzzy = zTreeObj.getNodesByParamFuzzy("name",this.nodeName,null);
            // console.log(nodesByParamFuzzy);
            //2.高亮查找到的节点
            //获取原节点
            //是多维数组格式，子节点需要递归遍历 通过transformToArray转换一维数组
            let nodes = zTreeObj.transformToArray(zTreeObj.getNodes());

            for (let i = 0; i < nodes.length; i++) {
                //初始化所有节点的高亮标记
                nodes[i].hightLight=false;//先初始化默认
                zTreeObj.updateNode(nodes[i]);
            }

            for (let i in nodesByParamFuzzy) {
                // nodesByParamFuzzy[i].higtLight=true;
                // zTreeObj.updateNode(nodesByParamFuzzy[i]);
                for (let j = 0; j < nodes.length; j++) {

                    //a.给所有高亮的节点添加高亮标记
                    //b.从原nodes中查找到对应的节点 更新节点 更新树上的节点属性内容
                    if(nodesByParamFuzzy[i].id===nodes[j].id){
                        nodes[j].hightLight=true;
                        zTreeObj.updateNode(nodes[j]);
                        break;//结束内层循环
                    }
                }
            }

        },
        fontCss:function (treeId,treeNode) {//treeId:树id  treeNode:当前设置样式的节点
            return treeNode.hightLight?{color:"red"}:{color:"black"};
        }
    },
    created: function () {
        this.selectPage(1, this.pageInfo.pageSize);
    },
    mounted:function () {//当vue接管的el创建的节点挂载到页面后触发       原生div->data初始化了->created ->mounted（el） 创建ztree
        this.initTree();
    }
});